<template>
  <div class="headerStyle">
     <div class="hstyle leftDiv">
       <div class="logo">
         <img src="../../assets/logo/logo.png" alt="">
       </div>
       <div class="weather">
         <div>
           {{ yearTime }}<br>
           {{monthTime}}{{dayTime}}{{zhouji}}
         </div>
         <div class="ml5 currentTime">
           {{ currentTime }}
         </div>
       </div>
     </div>
     <div class="hstyle titleSpan">
        {{title}}
     </div>
     <div class="hstyle rightDiv">
       <div class="shijian">
         <div class="weatherP" id="he-plugin-simple"> <i :class="'qi-' + now.icon"></i><span class="ml5">{{now.text}}</span> </div>
       </div>
       <div class="nameStyle">
         <el-icon color="#0380F3"><Setting /></el-icon>
         <span class="userName ml5">系统设置</span>
       </div>
       <div class="nameStyle">
         <el-icon  color="#0380F3" ><Avatar /></el-icon>
         <span class="userName ml5">{{ userName }}</span>
       </div>
     </div>
  </div>
</template>
<script>
import {

} from "@/api/header";
export default {
  name: "Index",
  data() {
    return {
      title:'智慧水厂管理平台',
      yearTime:'',
      monthTime:'',
      dayTime:'',
      zhouji:'',
      currentTime:'',
      userName:'admin',
      now:[]
    };
  },
  mounted() {


    // 在组件挂载后立即更新时间
    this.updateTime();
    // 每秒更新一次时间
    setInterval(this.updateTime, 1000);

    this.fetchWeatherData(118.672919,32.080514)
  },
  methods: {

    //实时时间
    updateTime() {
      const now = new Date();
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      const date = new Date();
      const dayOfWeek = days[date.getDay()];
      this.zhouji = dayOfWeek;
      // 更新年、月、日
      this.yearTime = now.getFullYear() + '年';
      this.monthTime = (now.getMonth() + 1).toString().padStart(2, '0') + '月';
      this.dayTime = now.getDate().toString().padStart(2, '0') + '日';
      // 更新当前时间
      this.currentTime = now.toLocaleTimeString();
    },
    getWeather(a, b) {
      return new Promise((resolve, reject) => {
        // 执行异步操作
        fetch(
          "https://devapi.qweather.com/v7/weather/now?location=" +
          a +
          "," +
          b +
          "&key=bfba064f971543be96f937c1825a2743"
        )
          .then((response) => response.json())
          .then((data) => {
            resolve(data.now);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    async fetchWeatherData(a, b) {
      try {
        // 调用 getWeather 方法，等待异步操作执行完成，并将结果赋值给 weather 变量
        this.now = await this.getWeather(a, b);
        // console.log(await this.getWeather(a, b))
      } catch (error) {
        console.error(error);
      }
    },
  }
};
</script>

<style scoped lang="scss">
.headerStyle {
  width: 100%;
  height: 100%;
  color: white;
  font-size: 20px;
  z-index: 9999;
  display: flex;
  background-image: url("../../assets/images/header.png");
  background-size: cover; /* 背景图片铺满并保持比例不变 */
  background-repeat: no-repeat; /* 不重复平铺 */
  background-position: center; /* 图片居中对齐 */
  margin: 0; /* 去除默认的外边距 */
  padding: 0; /* 去除默认的内边距 */
  .ml5{
    margin-left: 5px;
  }
  .hstyle{
      flex: 1;
  }
  .logo{
    width: 8rem;
  }
  .titleSpan{
    font-family: HYYaKuHei, HYYaKuHei;
    font-weight: normal;
    font-size: 2rem;
    color: #F0F4FF;
    letter-spacing: 4px;
    text-shadow: 0px 5px 10px #001C34;
    font-style: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .leftDiv{
    display: flex;

    .logo{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        justify-content: center;
        align-items: center;
        width: 11rem;
        margin-top: 0.4rem;
      }
    }
    .weather{
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;

      div:nth-of-type(1){
        font-size: 1rem;
        color: #019DFF;
      }
      div:nth-of-type(2){
        font-size: 1.8rem;
        color: #B9E4FF;
      }

    }
    div:nth-of-type(2){
      display: flex;
      flex: 1;
      justify-content: left;
      align-items: center;
      img{
        justify-content: center;
        align-items: center;
        width: 11rem;
      }
    }

  }


  .rightDiv{
    display: flex;
    div:nth-of-type(1){
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      text-align: right;
      padding-left: 1.5rem;
      div:nth-of-type(1){
        font-size: 1.2rem;
        color: #019DFF;
      }
      div:nth-of-type(2){
        font-size: 1.5rem;
        color: #B9E4FF;
      }
    }
    div:nth-of-type(2){
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
    }
    div:nth-of-type(3){
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
    }
    .nameStyle{
      cursor: pointer;
    }
    .userName{
      font-size: 1.2rem;
      color: white;
    }
  }



  .weatherP{

  }
}
</style>

